import React, { Component } from 'react';

class PasswordInput extends Component {

    constructor(props){
        super(props);

        this.props = props;

        let plaintext = this.props.hasOwnProperty('plaintext') ? this.props.plaintext : 0;

        this.state = {
            plaintext:plaintext,
            value:'',
            clear:'none',
            type:1,
        }
    }

    //输入值并切控制擦除按钮显示
    inputVlue(e)
    {
        let value = e.target.value;

        if(value.length >0 ){
            this.setState({
                value:value,
                clear:'inline'
            });
        }else{
            this.setState({
                value:value,
                clear:'none'
            });
        }
        this.props.getValue(value);
    }

    //清除值
    clear(e){
        this.setState({
            value:'',
            clear:'none'
        })

        this.props.getValue('');
    }

    //显示密码
    displayPassword(e)
    {
        if(this.state.type == 1){
            this.setState({
                type:0
            })
        }else{
            this.setState({
                type:1
            })
        }
    }

    render() {

        let plaintext = this.state.plaintext ? 'inline' : 'none';

        let placeholder = this.props.hasOwnProperty('placeholder') ? this.props.placeholder : '请输入密码'

        return (
            <div className='auth-login-input-box'>
                <div className='auth-login-input-wrapper'>
                    <i className='icon iconfont icon-password4 auth-icon'></i>
                    
                    <input 
                         onInput={(e)=>this.inputVlue(e)}
                         placeholder={placeholder} 
                         className='auth-input auth-input-password'
                         value={this.state.value} 
                    type={this.state.type ? 'password' : 'text'} />

                    <i  onClick={(e)=>this.clear(e)} 
                        style={{display:this.state.clear}} 
                        className='icon iconfont icon-clear clear'>
                    </i>

                    <i style={{display:plaintext}}
                        onClick={(e)=>this.displayPassword(e)}
                        className={this.state.type ? 'icon iconfont icon-kejian eye' : 'icon iconfont icon-bukejian eye'}>
                    </i>

                </div>
            </div>
        );
    }
}

export default PasswordInput;